﻿@page "/write"
@inherits PageComponentBase

<MAppBar App="true"
         Elevation="0">
    <ChildContent>
        <MButton Icon="true"
                 OnClick="NavigateToBack">
            <MIcon>
                mdi-arrow-left
            </MIcon>
        </MButton>

        <MSpacer></MSpacer>

        <MButton Icon="true"
                 OnClick="()=>ShowSelectTag = true">
            <MIcon>
                mdi-label-outline
            </MIcon>
        </MButton>

        <MultiMenu @bind-Value="ShowMenu"
                   ListItemModels="ListItemModels">
            <ButtonContent>
                <MultiDisplay>
                    <DesktopContent>
                        <MIcon>mdi-dots-horizontal</MIcon>
                    </DesktopContent>
                    <MobileContent>
                        <MIcon>mdi-dots-vertical</MIcon>
                    </MobileContent>
                </MultiDisplay>
            </ButtonContent>
        </MultiMenu>
    </ChildContent>
</MAppBar>

<ScrollContainer Class="d-flex"
                 ContentClass="d-flex flex-column flex-grow-1">
    <div>
        <div class="px-3 px-sm-1 d-flex align-end">
            @if (EnableEditCreateTime)
            {
                <button class="text-h6 font-weight-bold" @onclick="()=>ShowCreateTime=true">
                    @(Diary.CreateTime.ToString("yyyy/MM/dd"))
                    <MIcon>
                        mdi-pencil-outline
                    </MIcon>
                </button>
            }
            else
            {
                <span class="text-h6 font-weight-bold">
                    @(Diary.CreateTime.ToString("yyyy/MM/dd"))
                </span>
            }

            <span class="pl-5 text-subtitle-1">
                @(I18n.ToWeek(Diary.CreateTime))
            </span>
            <MSpacer></MSpacer>
            <span class="text-subtitle-1">
                @(CounterValue())
            </span>
        </div>
        <div class="px-2 px-sm-0">
            <MChip Class="my-2 mr-2"
                   Outlined="true"
                   OnClick="()=>ShowWeather=true">
                <MIcon Left>
                    @(GetWeatherIcon(Diary.Weather))
                </MIcon>
                @WeatherText
            </MChip>
            <MChip Class="my-2 mr-2"
                   Outlined="true"
                   OnClick="()=>ShowMood=true">
                <MIcon Left>
                    @(GetMoodIcon(Diary.Mood))
                </MIcon>
                @MoodText
            </MChip>
            <MChip Class="my-2 mr-2"
                   Outlined="true"
                   OnClick="()=>ShowLocation=true">
                <MIcon Left>
                    mdi-map-marker-outline
                </MIcon>
                @(string.IsNullOrEmpty(Location) ? I18n.T("Write.Location") : Location)
            </MChip>
        </div>
    </div>
    @if (EnableTitle)
    {
        <MTextField @bind-Value="Diary.Title"
                    Class="pb-0 my-sm-4 user-select font-weight-bold flex-grow-0"
                    Solo="Mobile"
                    Flat="Mobile"
                    Outlined="Desktop"
                    TValue="string"
                    HideDetails="@("auto")"
                    Dense="true"
                    spellcheck="false"
                    maxlength="50"
                    Placeholder="@(I18n.T("Write.TitlePlace"))">
        </MTextField>
    }

    <div class="write-input-wrap">
        @if (EnableMarkdown)
        {
            <MyMarkdown @bind-Value="Diary.Content"
                        WrapClass="write-markdown-wrap"
                        Class="my-sm-4 px-3 rounded-lg write-markdown">
            </MyMarkdown>
        }
        else
        {
            <MTextarea @bind-Value="Diary.Content"
                       Class="@($"my-sm-4 user-select rounded-lg flex-grow-1 flex-column {(EnableMarkdown?"d-none":"")}")"
                       Solo="Mobile"
                       Flat="Mobile"
                       Outlined="Desktop"
                       HideDetails="@("auto")"
                       NoResize="true"
                       spellcheck="false"
                       Placeholder="@(I18n.T("Write.ContentPlace"))">
            </MTextarea>
        }
    </div>

    <div class="mb-sm-5 @(SelectedTags.Any()?"":"d-none")">
        <div class="write-chip-group" style="width:100%;">
            @foreach (var item in SelectedTags)
            {
                <MChip Close="true"
                       Outlined="true"
                       OnCloseClick="()=>RemoveSelectedTag(item)">
                    @(item.Name)
                </MChip>
            }
        </div>
    </div>

    <div class="d-hover-none @(EnableMarkdown?"vditor-toolbar-help":"")">
    </div>

    <div class="d-no-hover-none hidden-xs-only">
        <MButton Class="px-8 mr-2 my-btn-chip text-subtitle-1"
                 Rounded="true"
                 Width="120"
                 Height="40"
                 Outlined="true"
                 OnClick="OnSave">
            @(I18n.T("Share.Save"))
        </MButton>
        <MButton Class="px-8 my-btn-chip text-subtitle-1"
                 Width="120"
                 Height="40"
                 Rounded="true"
                 Outlined="true"
                 OnClick="OnClear">
            @(I18n.T("Share.Clear"))
        </MButton>
    </div>
</ScrollContainer>

<SelectTags @bind-Value="ShowSelectTag"
@bind-Values="SelectedTags"
@bind-Tags="Tags"
            OnSave="SaveSelectTags">
</SelectTags>

<SelectIconDialog @bind-Value="ShowWeather"
@bind-Item="@Weather"
                  Title="@(I18n.T("Write.SelectWeather"))"
                  Items="WeatherIcons"
                  Text="@(item=>I18n.T("Weather." + item.Key))">
</SelectIconDialog>

<SelectIconDialog @bind-Value="ShowMood"
@bind-Item="@Mood"
                  Title="@(I18n.T("Write.SelectMood"))"
                  Items="MoodIcons"
                  Text="@(item=>I18n.T("Mood." + item.Key))">
</SelectIconDialog>

<SelectLocation @bind-Value="ShowLocation"
@bind-Location="Location">
</SelectLocation>

<MultiDatePicker @bind-Value="ShowCreateTime"
@bind-Date="CreateTime"
                 Max="DateOnly.FromDateTime(DateTime.Now)">
</MultiDatePicker>